<template>
  <div class="classification" @scroll.stop="scrollEvent">
    <div class="classification-all" ref="all">
      <div class="top">
        <header class="header">
          <div class="left" v-if="nowNav">
            <div
              :class="{ active: navIndex == index }"
              @click.stop="
                nowNav = nav;
                navIndex = index;
              "
              v-for="(nav, index) in navList"
              :key="index"
            >
              {{ nav.name }}
            </div>
          </div>
          <div class="right">
            <van-icon name="search" />
          </div>
        </header>
        <nav class="nav" v-if="secNavLabelList">
          <div
            class="nav-item"
            :class="{ active: secNavIndex == index }"
            @click.stop="
              nowSecNav = item;
              secNavIndex = index;
            "
            v-for="(item, index) in secNavLabelList"
            :key="index"
          >
            {{ item.name }}
          </div>
        </nav>
        <div class="option-all">
          <section class="select" title="选项">
            <span class="filter" @click.stop="isShowAllSelect=!isShowAllSelect">筛选</span>
            <div class="sort">
              <span
                :class="{ active: option.sort == 1 }"
                @click.stop="option.sort = 1"
                >畅销</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.sort == 3 }"
                @click.stop="option.sort = 3"
                >最新</span
              >
            </div>
            <div v-if="isShowAllSelect" class="pay">
              <span
                :class="{ active: option.pay == 0 }"
                @click.stop="option.pay = 0"
                >全部</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.pay == 1 }"
                @click.stop="option.pay = 1"
                >收费</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.pay == 2 }"
                @click.stop="option.pay = 2"
                >免费</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.pay == 3 }"
                @click.stop="option.pay = 3"
                >包月</span
              >
            </div>
            <div v-if="isShowAllSelect" class="bookStatus">
              <span
                :class="{ active: option.bookStatus == 0 }"
                @click.stop="option.bookStatus = 0"
                >全部</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.bookStatus == 1 }"
                @click.stop="option.bookStatus = 1"
                >连载</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.bookStatus == 2 }"
                @click.stop="option.bookStatus = 2"
                >完本</span
              >
            </div>
            <div v-if="isShowAllSelect" class="wordCount">
              <span
                :class="{ active: option.wordCount == 0 }"
                @click.stop="option.wordCount = 0"
                >全部</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.wordCount == 1 }"
                @click.stop="option.wordCount = 1"
                >30万字以下</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.wordCount == 2 }"
                @click.stop="option.wordCount = 2"
                >30-50万字</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.wordCount == 3 }"
                @click.stop="option.wordCount = 3"
                >50-100万字</span
              >
              <span class="dot"></span>
              <span
                :class="{ active: option.wordCount == 4 }"
                @click.stop="option.wordCount = 4"
                >100万字以上</span
              >
            </div>
          </section>
        </div>
      </div>
      <section class="list-content">
        <HomeCardItem2
          :width="'30%'"
          v-for="(map, index) in showList"
          :key="index"
          :item="map"
        />
      </section>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import HomeCardItem2 from "@/components/home/HomeCardItem2.vue";
export default {
  components: {
    HomeCardItem2,
  },
  data: () => {
    return {
      isShowAllSelect:false,
      navList: null,
      nowNav: null, //当前频道（一级）
      nowSecNav: null, //当前分类（二级）
      secNavLabelList: null,
      navIndex: 0,
      secNavIndex: 0,
      showList: [],
      option: {
        wordCount: 0, //多少字数
        pay: 0, //收费情况
        bookStatus: 0, //连载还是完本
        sort: 1, //畅销还是最新
      },
      page: 1, //分页
      userTime: 0,
    };
  },
  computed: {
    ...mapState(["sex"]),
  },
  watch: {
    nowNav() {
      this.page=1;
      this.showList=[];
      this.getSecNav();
    },
    nowSecNav(val) {
      console.log(val);
      console.log(`${this.api.baseUrlV2}${this.nowSecNav.url}`);
      this.page = 1;
      this.showList = [];
      this.getShowList();
    },
    option: {
      handler() {
        console.log(this.option);
        this.page = 1;
        this.showList = [];
        this.getShowList();
      },
      deep: true,
    },
  },
  methods: {
    scrollEvent(e) {
      clearTimeout(this.userTime);
      this.userTime = setTimeout(() => {
        let all = getComputedStyle(this.$refs.all);
        console.log(e.target.scrollTop, Number.parseInt(all.height));
        if (
          Number.parseInt(all.height) -
            e.target.clientHeight -
            e.target.scrollTop <
          100
        ) {
          // this.getMoreData();
          this.option.page++;
          this.getShowList();
        }
      }, 1000);
    },
    //获取初始列表数据(待处理)
    getShowList() {
      console.log(this.nowSecNav, "111w2w");
      let query = this.nowSecNav.url.split("?");
      console.log(query);
      this.axios({
        method: "get",
        url: `${this.api.baseUrlV2}/source/v2/searchBook.json?${query}&wordCount=${this.option.wordCount}&pay=${this.option.pay}&bookStatus=${this.option.bookStatus}&sort=${this.option.sort}&&page=${this.page}`,
      }).then((res) => {
        console.log(res);
        if(!res?.data?.list){
          this.$toast("暂无数据");
          return;
        }
        this.showList = [...this.showList, ...res.data.list];
      });
    },
    //获取二级标签
    getSecNav() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlV2}${this.nowNav.node[0].url}`,
      }).then((res) => {
        this.secNavLabelList = res.data.list[0].labels;
        this.nowSecNav = this.secNavLabelList[0];
        this.secNavIndex = 0;
        console.log(this.secNavLabelList, "121211111111");
      });
    },
    //获取初始标签
    getNavData() {
      this.axios({
        method: "get",
        url: `${this.api.baseUrlData}/yunyuedu/store/node.json?gender=${this.sex}`,
      }).then((res) => {
        this.navList = res.data.books;
        this.nowNav = this.navList[0];
        console.log(this.nowNav);
      });
    },
  },
  created() {
    this.getNavData();
  },
};
</script>

<style lang='scss' scoped>
.classification {
  width: 100%;
  height: 100vh;
  overflow: scroll;
  box-sizing: border-box;
  padding-bottom: 0.5rem;
  &::-webkit-scrollbar {
    display: none;
  }
  .top {
    width: 100%;
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
    background-color: var(--bgc-white);
  }
  .header {
    width: 100%;
    height: 0.5rem;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .left {
      height: 100%;
      flex-grow: 1;
      display: flex;
      align-items: center;
      > div {
        height: 100%;
        text-align: center;
        line-height: 0.5rem;
        padding: 0 0.1rem;
        transition: 0.3s;
        &:first-child {
          padding-left: 0;
        }
      }
      .active {
        font-weight: bold;
      }
    }
    .right {
      min-width: 0.2rem;
      font-size: 0.2rem;
    }
  }
  .nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    background-color: var(--bgc-gray);
    > div {
      position: relative;
      text-align: center;
      padding: 0.05rem 0.15rem;
      transition: 0.3s;
      margin: 0.05rem 0;
      &::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0.02rem;
        margin: 0 auto;
        width: 30%;
        height: 0.02rem;
        border-radius: 0.01rem;
        background-color: transparent;
        transition: 0.3s;
      }
    }
    .active {
      color: var(--text-red);
      &::after {
        background-color: var(--text-red);
      }
    }
  }
  .option-all {
    position: relative;
    .select {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 0.1rem 0.15rem;
      .filter {
        position: absolute;
        right: 0.15rem;
        top: 0.12rem;
        height: 0.21rem;
        padding: 0 0.04rem;
        box-sizing: border-box;
        border-radius: 0.04rem;
        line-height: 0.21rem;
        font-size: 0.12rem;
        border: 0.01rem solid var(--text-gray2);
        color: var(--text-gray);
      }
      > div {
        width: 100%;
        font-size: 0.14rem;
        line-height: 0.2rem;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        > span {
          margin: 0.05rem 0.1rem;
          &:first-child {
            margin-left: 0;
          }
        }
        .dot {
          display: inline-block;
          margin: 0;
          width: 0.06rem;
          height: 0.06rem;
          border-radius: 50%;
          background-color: var(--text-gray2);
        }
        .active {
          color: var(--text-red);
        }
      }
    }
  }
  .list-content {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.15rem;
    display: flex;
    flex-wrap: wrap;
    > div {
      margin-bottom: 0.15rem;
      margin-right: 0.17rem;
      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}
</style>